<template>
  <div class="fixed top-16 left-0 right-0 h-16 z-50 bg-white/95 backdrop-blur-md ">
    <div class="max-w-7xl mx-auto px-4 h-full">
      <!-- 桌面端导航 -->
      <div class="hidden lg:flex items-center justify-center h-full">
        <div class="flex items-center space-x-2">
          <router-link
            v-for="(category, index) in categories"
            :key="index"
            :to="category.path"
            class="relative group px-4 py-2.5 rounded-2xl transition-all duration-300 flex items-center space-x-2 hover:scale-105 active:scale-95"
            :class="{
              'bg-gradient-to-r from-[#a2d5c6] to-[#87CEEB] text-white shadow-lg transform scale-105': isActive(category.path),
              'text-gray-600 hover:text-[#a2d5c6] hover:bg-gray-50': !isActive(category.path)
            }"
          >
            <!-- 图标容器 -->
            <div 
              class="relative w-6 h-6 flex items-center justify-center rounded-lg transition-all duration-300"
              :class="{
                'bg-white/20': isActive(category.path),
                'group-hover:bg-[#a2d5c6]/10': !isActive(category.path)
              }"
            >
              <i 
                :class="category.icon" 
                class="text-sm transition-all duration-300"
                :style="{ color: isActive(category.path) ? 'white' : category.color }"
              ></i>
            </div>
            
            <!-- 文字 -->
            <span class="font-medium text-sm whitespace-nowrap">{{ category.name }}</span>
            
            <!-- 活跃状态指示器 -->
            <div 
              v-if="isActive(category.path)"
              class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-white rounded-full animate-pulse"
            ></div>
            
            <!-- 悬停效果 -->
            <div 
              class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#a2d5c6]/0 to-[#87CEEB]/0 group-hover:from-[#a2d5c6]/5 group-hover:to-[#87CEEB]/5 transition-all duration-300"
              v-if="!isActive(category.path)"
            ></div>
          </router-link>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "CategoryNav",
  data() {
    return {
      canScrollLeft: false,
      canScrollRight: true,
      categories: [
        { 
          name: "首页", 
          path: "/home", 
          icon: "fas fa-home",
          color: "#6dcfbc"
        },
        { 
          name: "广场", 
          path: "/square", 
          icon: "fas fa-compass",
          color: "#50abd5"
        },
        { 
          name: "关注", 
          path: "/concern", 
          icon: "fas fa-heart",
          color: "#f18996"
        },
        { 
          name: "社团", 
          path: "/community", 
          icon: "fas fa-users",
          color: "#9066f3"
        },
        { 
          name: "镖局", 
          path: "/delivery", 
          icon: "fas fa-shipping-fast",
          color: "#70ccb2"
        },
        { 
          name: "果铺", 
          path: "/store", 
          icon: "fas fa-store",
          color: "#fcc14aff"
        },
        { 
          name: "AI产品", 
          path: "/ai", 
          icon: "fas fa-robot",
          color: "#885dea"
        },
        { 
          name: "公告", 
          path: "/notice", 
          icon: "fas fa-bullhorn",
          color: "#e43855"
        },
        { 
          name: "反馈", 
          path: "/feedback", 
          icon: "fas fa-comment-dots",
          color: "#40aad4ff"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.updateScrollButtons();
    });
  },
  methods: {
    isActive(path) {
      return this.$route.path === path;
    },
    updateScrollButtons() {
      const container = this.$refs.scrollContainer;
      if (container) {
        this.canScrollLeft = container.scrollLeft > 0;
        this.canScrollRight = container.scrollLeft < (container.scrollWidth - container.clientWidth);
      }
    }
  },
  watch: {
    '$route'() {
      // 路由变化时，确保当前激活项可见
      this.$nextTick(() => {
        const activeElement = this.$el.querySelector('.router-link-exact-active');
        if (activeElement && this.$refs.scrollContainer) {
          activeElement.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'nearest',
            inline: 'center'
          });
        }
      });
    }
  }
};
</script>

<style scoped>

@keyframes activeScale {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 图标旋转动画 */
.router-link-exact-active i {
  animation: iconRotate 0.5s ease-out;
}

@keyframes iconRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 悬停效果增强 */
.group:hover .fas {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 活跃指示器动画 */
@keyframes pulse {
  0%, 100% { 
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: translateX(-50%) scale(1.2);
  }
}

/* 渐变背景动画 */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 毛玻璃效果 */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .backdrop-blur-md {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

</style>